<!--
/**
 * AppHeader 组件
 * 
 * 应用顶部导航栏
 * 
 * @author yangzhixin
 */
-->

<template>
  <div class="app-header">
    <div class="header-content">
      <!-- Logo和标题 -->
      <div class="header-left" @click="$router.push('/')">
        <i class="material-icons logo-icon">medical_services</i>
        <span class="app-title">医学影像查看器</span>
      </div>

      <!-- 导航菜单 -->
      <div class="header-nav">
        <q-btn
          flat
          dense
          icon="home"
          label="首页"
          :class="{ active: $route.path === '/' }"
          @click="$router.push('/')"
        />
        
        <q-btn-dropdown
          flat
          dense
          icon="menu"
          label="功能"
        >
          <q-list>
            <q-item clickable v-close-popup @click="$router.push('/dicom-static')">
              <q-item-section avatar>
                <q-icon name="image" />
              </q-item-section>
              <q-item-section>
                <q-item-label>静态DICOM</q-item-label>
                <q-item-label caption>单文件加载</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/dicom-folder')">
              <q-item-section avatar>
                <q-icon name="folder" />
              </q-item-section>
              <q-item-section>
                <q-item-label>DICOM文件夹</q-item-label>
                <q-item-label caption>批量序列加载</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/dicom-zip')">
              <q-item-section avatar>
                <q-icon name="archive" />
              </q-item-section>
              <q-item-section>
                <q-item-label>DICOM压缩包</q-item-label>
                <q-item-label caption>ZIP文件解压</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/nii-loader')">
              <q-item-section avatar>
                <q-icon name="psychology" />
              </q-item-section>
              <q-item-section>
                <q-item-label>NII文件</q-item-label>
                <q-item-label caption>神经影像</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-close-popup @click="$router.push('/dicom-dynamic')">
              <q-item-section avatar>
                <q-icon name="play_circle" />
              </q-item-section>
              <q-item-section>
                <q-item-label>动态序列</q-item-label>
                <q-item-label caption>序列播放</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/dicom-3phase')">
              <q-item-section avatar>
                <q-icon name="view_carousel" />
              </q-item-section>
              <q-item-section>
                <q-item-label>三期对比</q-item-label>
                <q-item-label caption>多期分析</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/dicom-volume')">
              <q-item-section avatar>
                <q-icon name="view_in_ar" />
              </q-item-section>
              <q-item-section>
                <q-item-label>Volume 3D</q-item-label>
                <q-item-label caption>体积渲染</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-close-popup @click="$router.push('/integrated-viewer')">
              <q-item-section avatar>
                <q-icon name="dashboard" color="primary" />
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-primary text-weight-medium">
                  集成查看器
                  <q-badge color="primary" label="新" class="q-ml-sm" />
                </q-item-label>
                <q-item-label caption>完整分析平台</q-item-label>
              </q-item-section>
            </q-item>

            <q-separator />

            <q-item clickable v-close-popup @click="$router.push('/dicom-nii-combo')">
              <q-item-section avatar>
                <q-icon name="layers" />
              </q-item-section>
              <q-item-section>
                <q-item-label>多模态融合</q-item-label>
                <q-item-label caption>DICOM+NII</q-item-label>
              </q-item-section>
            </q-item>

            <q-item clickable v-close-popup @click="$router.push('/format-validation')">
              <q-item-section avatar>
                <q-icon name="verified" />
              </q-item-section>
              <q-item-section>
                <q-item-label>格式校验</q-item-label>
                <q-item-label caption>文件验证</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-btn-dropdown>
      </div>

      <!-- 右侧操作 -->
      <div class="header-right">
        <q-btn
          flat
          dense
          round
          icon="info"
          @click="showInfo = true"
        >
          <q-tooltip>关于</q-tooltip>
        </q-btn>
      </div>
    </div>

    <!-- 关于对话框 -->
    <q-dialog v-model="showInfo">
      <q-card style="min-width: 350px">
        <q-card-section>
          <div class="text-h6">医学影像查看器</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <p>专业的DICOM和NII格式医学影像处理平台</p>
          <p class="text-caption text-grey-7">
            版本: v1.0.0<br>
            作者: yangzhixin<br>
            基于: Cornerstone3D + Vue 3 + Quasar
          </p>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="关闭" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showInfo = ref(false);
</script>

<style scoped lang="scss">
.app-header {
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.header-left:hover {
  opacity: 0.8;
}

.logo-icon {
  color: white;
  font-size: 32px;
}

.app-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav :deep(.q-btn) {
  color: white;
}

.header-nav :deep(.q-btn.active) {
  background: rgba(255, 255, 255, 0.2);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-right :deep(.q-btn) {
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 8px 16px;
  }

  .app-title {
    font-size: 1rem;
  }

  .logo-icon {
    font-size: 28px;
  }

  .header-nav :deep(.q-btn .q-btn__content span) {
    display: none;
  }
}
</style>





